<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="../assets/favicon.ico">
<title>jindo.Canvas - Jindo Component - AjaxUI@NHN</title>
<link rel="stylesheet" type="text/css" href="../assets/prettify/prettify-min.css" media="screen">
<script type="text/javascript">
	var isMobile = (function() {
		var r = window.devicePixelRatio || 1;
		if (/windows phone/i.test(navigator.userAgent)) { r = 2; }
		
		var s = Math.max(screen.width / r, screen.height / r);
		
		var m = s < 1024;
		var href = m ? "api.mobile.css" : "api.css";
		document.write('<link rel="stylesheet" type="text/css" href="../assets/' + href + '" media="screen">');
		
		return m;
	})();
</script>

<script type="text/javascript" src="../assets/jindo.desktop.min.js"></script>
<script type="text/javascript" src="../assets/jindo_component.min.js"></script>
</head>
<body class="api-page">
<div id="wrap" class=""><!-- 2Depth 접기 : lft_fold 추가 -->

	<div id="header">
		<h1><a href="../index.html"><span class="blind">JindoJS</span></a></h1>
		<div class="info">
			<span class="version">version 1.6.0</span>
			<span class="bar">|</span>
			<span class="help"><span class="ic_help"></span><a href="http://devcode.nhncorp.com/projects/jindo-component/issue" target="_blank">버그신고/문의</a></span>
		</div>
		<div class="menu">
			<button type="button" id="toggle_search_btn" class="btn_sch"><span class="blind">검색</span></button>
			<button type="button" id="toggle_list_btn" class="btn_snb btn_snb_on"><span class="blind">메뉴</span></button>
			<!-- [D] 클릭시 btn_sch_on,btn_snb_on 추가 -->
		</div>
	</div>

	<!-- sch_frm -->
	<div class="sch_frm hide_when_small">
		<h2 class="blind">검색</h2>
		<div class="filter">
			<input type="search" id="api-filter" placeholder="검색어를 입력하세요.">
		</div>
		<div id="search-tab" style="display:none;">
			<ul class="tabs">
			<li class="tc-tab">전체</li>
			<li class="tc-tab">키워드</li>
			<li class="tc-tab">클래스</li>
			<li class="tc-tab">메서드</li>
			<li class="tc-tab">프로퍼티</li>
			<li class="tc-tab">이벤트</li>
			</ul>
			<div class="panels">
				<ul id="api-all" class="tc-panel"></ul>
				<ul id="api-keywords" class="tc-panel"></ul>
				<ul id="api-classes" class="tc-panel"></ul>
				<ul id="api-methods" class="tc-panel"></ul>
				<ul id="api-attrs" class="tc-panel"></ul>
				<ul id="api-events" class="tc-panel"></ul>
			</div>

		</div>
	</div>
	<!-- // sch_frm -->

	<!-- container -->
	<div id="container">
		<!-- left-columns -->
		<div id="left-columns" class="sidemenu has_scrollbar">
			<h2 class="blind"><a href="../index.html"><span>APIs</span></a></h2>
<div class="snb depth1 scrollbar hide_when_small">
	<!-- [D] style="width:135px; height:384px; -->
	<div class="scrollbar-box">
		<div class="scrollbar-content">
			<div><ul>
			            <li class="">
			            	<a href="../classes/jindo.Accordion.html" class="">
			                	Accordion
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.AjaxHistory.html" class="">
			                	AjaxHistory
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.BrowseButton.html" class="">
			                	BrowseButton
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Cache.html" class="">
			                	Cache
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Calendar.html" class="">
			                	Calendar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Canvas.html" class="selected">
			                	Canvas
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CheckBox.html" class="">
			                	CheckBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CircularRolling.html" class="">
			                	CircularRolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Clipboard.html" class="">
			                	Clipboard
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Component.html" class="">
			                	Component
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DataBridge.html" class="">
			                	DataBridge
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DatePicker.html" class="">
			                	DatePicker
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DefaultTextValue.html" class="">
			                	DefaultTextValue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Dialog.html" class="">
			                	Dialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DragArea.html" class="">
			                	DragArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DropArea.html" class="">
			                	DropArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DynamicTree.html" class="">
			                	DynamicTree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Effect.html" class="">
			                	Effect
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FileUploader.html" class="">
			                	FileUploader
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FloatingLayer.html" class="">
			                	FloatingLayer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Foggy.html" class="">
			                	Foggy
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Formatter.html" class="">
			                	Formatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.HTMLComponent.html" class="">
			                	HTMLComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.InlineTextEdit.html" class="">
			                	InlineTextEdit
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerEffect.html" class="">
			                	LayerEffect
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerManager.html" class="">
			                	LayerManager
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerPosition.html" class="">
			                	LayerPosition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LazyLoading.html" class="">
			                	LazyLoading
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ModalDialog.html" class="">
			                	ModalDialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MouseGesture.html" class="">
			                	MouseGesture
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MultipleAjaxRequest.html" class="">
			                	MultipleAjaxRequest
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumberFormatter.html" class="">
			                	NumberFormatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumericStepper.html" class="">
			                	NumericStepper
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Pagination.html" class="">
			                	Pagination
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Rolling.html" class="">
			                	Rolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RollingChart.html" class="">
			                	RollingChart
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverArea.html" class="">
			                	RolloverArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverClick.html" class="">
			                	RolloverClick
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBar.html" class="">
			                	ScrollBar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBox.html" class="">
			                	ScrollBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectArea.html" class="">
			                	SelectArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectBox.html" class="">
			                	SelectBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Slider.html" class="">
			                	Slider
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.StarRating.html" class="">
			                	StarRating
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TabControl.html" class="">
			                	TabControl
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TextRange.html" class="">
			                	TextRange
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Timer.html" class="">
			                	Timer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Transition.html" class="">
			                	Transition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Tree.html" class="">
			                	Tree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UIComponent.html" class="">
			                	UIComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UploadQueue.html" class="">
			                	UploadQueue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.WatchInput.html" class="">
			                	WatchInput
								
								

							    
						        
			            	</a>
			            </li>
			        </ul></div>
		</div>
	</div>
	<div class="scrollbar-v">
		<div class="scrollbar-button-up"></div>
		<div class="scrollbar-track">
			<div class="scrollbar-thumb" style="top: 0px; height: 222px; "></div>
		</div>
		<div class="scrollbar-button-down"></div>
	</div>
</div>


	
<div class="snb depth2 scrollbar">
	<div class="scrollbar-box">
		<div class="scrollbar-content">
			<h3 class="blind">jindo.Canvas 클래스</h3>
			<div class="smanuals">
		
				<h3>보기 옵션</h3>
				<ul class="api-options">
					<li class="api-show-inherited">
						<span id="checkbox-inherited">
							<span class="checkbox-mark checkbox-checked"></span>
							<input type="checkbox" id="api-show-inherited">
						</span><label for="api-show-inherited">상속받은 항목</label>

					</li>
					<li class="api-show-deprecated">
						<span id="checkbox-deprecated">
							<span class="checkbox-mark"></span>
							<input type="checkbox" id="api-show-deprecated">
						</span><label for="api-show-deprecated">폐지예정 항목</label>
					</li>
				</ul>
	
		        
		            <h3><a href="#manual">매뉴얼</a></h3>
		
		            <ul class="manuals">
		                
		                    <li class="manual">
		                        <a href="#manual_4fd56ee689bca7417e15c5ddc1e90641">자세한 설명</a>
		                    </li>
		                
		                    <li class="manual">
		                        <a href="#manual_cbd30bb38edc7ffc879aabd5f479a2c7">기본 초기화 형태</a>
		                    </li>
		                
		            </ul>
		        

		        
		            <h3><a href="#demo">데모</a></h3>
		        
		
		        
		            <h3><a href="#constructor">생성자</a></h3>
		
		            <ul class="constructors">
		                
		                    <li class="">
		                        <a href="#constructor_jindo.Canvas">
		                            Canvas
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		            </ul>
		        
				
		        
		
		        
		            <h3><a href="#method">메서드</a></h3>
		
		            <ul class="methods">
		                
		                    <li class="">
		                        <a href="#method_clear" title="canvas&nbsp;엘리먼트&nbsp;내부를&nbsp;모두&nbsp;지운다.">
		                            clear()
		                            
		                            
		                            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_create" title="canvas&nbsp;엘리먼트를&nbsp;생성한다.">
		                            create()
		                            
		                            <span class="flag static" title="static"><span class="blind">static</span></span>
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_drawFace" title="여러개의&nbsp;점으로&nbsp;이루어진&nbsp;면을&nbsp;그린다.">
		                            drawFace()
		                            
		                            
		                            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_drawLine" title="여러개의&nbsp;점으로&nbsp;이루어진&nbsp;선을&nbsp;그린다.">
		                            drawLine()
		                            
		                            
		                            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_drawRect" title="x,&nbsp;y&nbsp;좌표를&nbsp;기준으로&nbsp;사각형&nbsp;막대를&nbsp;그린다.">
		                            drawRect()
		                            
		                            
		                            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_getContainer" title="canvas&nbsp;엘리먼트의&nbsp;컨테이너&nbsp;엘리먼트를&nbsp;가져온다.">
		                            getContainer()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_getContext" title="canvas&nbsp;엘리먼트의&nbsp;컨텍스트를&nbsp;가져온다.">
		                            getContext()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_getContext" title="canvas&nbsp;엘리먼트의&nbsp;컨텍스트&nbsp;객체를&nbsp;가져온다.">
		                            getContext()
		                            
		                            <span class="flag static" title="static"><span class="blind">static</span></span>
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_getElement" title="canvas&nbsp;엘리먼트를&nbsp;가져온다.">
		                            getElement()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_height" title="canvas&nbsp;엘리먼트의&nbsp;높이를&nbsp;구한다.">
		                            height()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_height" title="canvas&nbsp;엘리먼트의&nbsp;높이를&nbsp;설정한다.">
		                            height()
		                            
		                            
		                            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_width" title="canvas&nbsp;엘리먼트의&nbsp;너비를&nbsp;구한다.">
		                            width()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_width" title="canvas&nbsp;엘리먼트의&nbsp;너비를&nbsp;설정한다.">
		                            width()
		                            
		                            
		                            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
		                            
		                        </a>
		                    </li>
		                
		            </ul>
		        
		
		        
		
		        
		
		        
	
			</div>
		</div>
	</div>
	<div class="scrollbar-v">
		<div class="scrollbar-button-up"></div>
		<div class="scrollbar-track">
			<div class="scrollbar-thumb" style="top: 0px; height: 222px; "></div>
		</div>
		<div class="scrollbar-button-down"></div>
	</div>
</div>

<button type="button" title="펼치기" class="btn_open">바로가기 열기<span class="ic"></span></button>
<button type="button" title="접기" class="btn_close">바로가기 닫기<span class="ic"></span></button>

		</div>
		<!-- // left-columns -->

		<!-- main content -->
		<div id="main">
			<div class="main_fix">
				
<!-- content -->
<div class="content">
	<h1 class="blind">
		Canvas
	</h1>

	<div class="tc-panel first">
		<dl class="relation">
		<dt>클래스</dt>
		<dd>jindo.Canvas
		    
	        
			<span class="btn_code"><a href="../files/source_jindo.Canvas.js.html#l62" title="view source code"><span class="blind">소스코드</span></a></span>
		</dd>

	    

	    
		
	    
		
	    
		
		</dl>

		
		
		<div class="description"><p>HTML5 Canvas 엘리먼트를 생성하고 간단한 그래픽 작업을 할 수 있도록 지원하는 컴포넌트</p></div>
		
		

	    
	    
		<div class="qr_code">
			<strong>QR code</strong>
		
			<div id="QRView">
			<script type="text/javascript">

				document.write([
					'<img src="http://chart.apis.google.com/chart?cht=qr&chs=220x220&chl=',
					encodeURIComponent(location.href.replace(/#.*$/, '')),
					'&choe=UTF-8" />'
				].join(''));

			</script>
			</div>
		</div>	    
	    
		
	</div>

	<div class="tc-panel panel">

        
			<h2 class="noline">생성자</h2>
			
			<table class="tbl_board">
			<caption class="hide">생성자</caption>
			<colgroup>
			<col style="width:22px">
			<col />
			<col style="width:160px">
			</colgroup>
			<thead>
			<tr>
			<th scope="col"></th>
			<th scope="col">생성자</th>
			<th scope="col">정의 주체</th>
			</tr>
			</thead>
			<tbody>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#constructor_jindo.Canvas" class="name">jindo.Canvas</a>
([el:<span class="type"><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>])
 
						<p></p>
					</td>
					<td>jindo.Canvas</td>
					</tr>
	            
			</tbody>
			</table>
		

        

        
			<h2 class="noline">메서드</h2>
			
			<table class="tbl_board">
			<caption class="hide">메서드</caption>
			<colgroup>
			<col style="width:22px">
			<col style="">
			<col style="width:160px">
			</colgroup>
			<thead>
			<tr>
			<th scope="col"></th>
			<th scope="col">메서드</th>
			<th scope="col">정의 주체</th>
			</tr>
			</thead>
			<tbody>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_clear" class="name">clear</a>
( )
:<a href="..\classes\jindo.Canvas.html" class="crosslink">jindo.Canvas</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span>
						<p><p>canvas 엘리먼트 내부를 모두 지운다.</p></p>
					</td>
					<td>jindo.Canvas</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_create" class="name">create</a>
(nWidth:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>, nHeight:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>, [elParent:<span class="type"><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>])
:<a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a>
 
<span title="static" class="flag static"><span class="blind">static</span></span>
						<p><p>canvas 엘리먼트를 생성한다.</p></p>
					</td>
					<td>jindo.Canvas</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_drawFace" class="name">drawFace</a>
(a:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array" class="crosslink external" target="_blank">Array</a></span>, htOption:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>)
:<a href="..\classes\jindo.Canvas.html" class="crosslink">jindo.Canvas</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span>
						<p><p>여러개의 점으로 이루어진 면을 그린다.</p></p>
					</td>
					<td>jindo.Canvas</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_drawLine" class="name">drawLine</a>
(a:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array" class="crosslink external" target="_blank">Array</a></span>, htOption:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>, [bBlockAntiAlias:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>])
:<a href="..\classes\jindo.Canvas.html" class="crosslink">jindo.Canvas</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span>
						<p><p>여러개의 점으로 이루어진 선을 그린다.</p></p>
					</td>
					<td>jindo.Canvas</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_drawRect" class="name">drawRect</a>
(nX:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>, nY:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>, nWidth:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>, nHeight:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>, htOption:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>, bBlockAntiAlias:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>)
:<a href="..\classes\jindo.Canvas.html" class="crosslink">jindo.Canvas</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span>
						<p><p>x, y 좌표를 기준으로 사각형 막대를 그린다.</p></p>
					</td>
					<td>jindo.Canvas</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_getContainer" class="name">getContainer</a>
( )
:<a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a>
 
						<p><p>canvas 엘리먼트의 컨테이너 엘리먼트를 가져온다.</p></p>
					</td>
					<td>jindo.Canvas</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_getContext" class="name">getContext</a>
( )
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a>
 
						<p><p>canvas 엘리먼트의 컨텍스트를 가져온다.</p></p>
					</td>
					<td>jindo.Canvas</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_getContext" class="name">getContext</a>
(el:<span class="type"><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>)
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a>
 
<span title="static" class="flag static"><span class="blind">static</span></span>
						<p><p>canvas 엘리먼트의 컨텍스트 객체를 가져온다.</p></p>
					</td>
					<td>jindo.Canvas</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_getElement" class="name">getElement</a>
( )
:<a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a>
 
						<p><p>canvas 엘리먼트를 가져온다.</p></p>
					</td>
					<td>jindo.Canvas</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_height" class="name">height</a>
( )
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a>
 
						<p><p>canvas 엘리먼트의 높이를 구한다.</p></p>
					</td>
					<td>jindo.Canvas</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_height" class="name">height</a>
(n:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>)
:<a href="..\classes\jindo.Canvas.html" class="crosslink">jindo.Canvas</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span>
						<p><p>canvas 엘리먼트의 높이를 설정한다.</p></p>
					</td>
					<td>jindo.Canvas</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_width" class="name">width</a>
( )
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a>
 
						<p><p>canvas 엘리먼트의 너비를 구한다.</p></p>
					</td>
					<td>jindo.Canvas</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_width" class="name">width</a>
(n:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>)
:<a href="..\classes\jindo.Canvas.html" class="crosslink">jindo.Canvas</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span>
						<p><p>canvas 엘리먼트의 너비를 설정한다.</p></p>
					</td>
					<td>jindo.Canvas</td>
					</tr>
	            
			</tbody>
			</table>
        

        			
	</div>

    
        <div class="tc-panel">
			<h2 id="manual">매뉴얼</h2>
            
				<div id="manual_4fd56ee689bca7417e15c5ddc1e90641" class="manual item">
				    <h3>자세한 설명</h3>
				    <div class="description"><p>jindo.Canvas 컴포넌트는 HTML5 Canvas 엘리먼트를 생성하고 컨텍스트 객체를 이용한 간단한 그래픽 작업을 할 수 있도록 지원하는 컴포넌트입니다.</p>

<h4>HTML5 Canvas</h4>

<p>HTML5 Canvas 엘리먼트는 비트맵방식의 그래픽을 스크립트로 처리할 수 있는 엘리먼트입니다.</p>

<h5>브라우저 지원</h5>

<p>HTML5 Canvas 엘리먼트는 IE9과 기타 거의 모든 최신 웹브라우저가 지원하고 있습니다.
HTML5 Canvas 엘리먼트를 지원하지 않는 IE9 이전버전에서의 지원을 위해 내부적으로 ExplorerCanvas (excanvas) 라이브러리를 사용합니다.
ExplorerCanvas는 구글맵에서 도형을 그리기위해 작성된 오픈소스 라이브러리로 IE6이상의 브라우저에서 IE가 제공하는 기능인 VML을 이용하여 Canvas 객체를 에뮬레이팅해줍니다.</p>

<h4>Canvas 엘리먼트의 생성</h4>

<p>jindo.Canvas 컴포넌트를 이용해 Canvas 엘리먼트를 생성하는 방법은 다음과 같습니다.</p>

<pre class="code"><code class="prettyprint">//디폴트 가로크기 300, 세로크기 150
var elCanvas = jindo.Canvas.create();
//가로크기 500, 세로크기 300
var elCanvas = jindo.Canvas.create(500, 300);
//가로크기 500, 세로크기 300, jindo.$("test")에 append
var elCanvas = jindo.Canvas.create(500, 300, jindo.$("test"));
</code></pre>

<h4>Canvas 엘리먼트의 컨텍스트 가져오기</h4>

<p>생성된 Canvas 엘리먼트에 그래픽을 그리기 위해서는 컨텍스트(context)객체를 가져와야합니다.</p>

<pre class="code"><code class="prettyprint">var elCanvas = jindo.Canvas.create();

//jindo.Canvas.getContext() 스태틱 메서드 사용
var ctx = jindo.Canvas.getContext(elCanvas);

//jindo.Canvas.getContext() 인스턴스 메서드 사용
var oCanvas = new jindo.Canvas(elCanvas);
var ctx = oCanvas.getContext();
</code></pre>

<p>컨텍스트 객체를 이용해서 라인, 사각형을 그리거나 문자, 이미지, 음영, 그라데이션처리 등의 그래픽 작업을 할 수 있습니다. 자세한 내용은 HTML Canvas 2D Context 문서를 참고하기 바랍니다.</p>

<h4>간단한 드로잉</h4>

<p>jindo.Canvas 컴포넌트는 캔버스의 컨텍스트를 이용한 간단한 그래픽 드로잉(선/면/사각형/지우기 등)을 지원합니다. 자세한 내용은 데모와 Method 설명에서 확인해주세요.</p></div>
				</div>
            
				<div id="manual_cbd30bb38edc7ffc879aabd5f479a2c7" class="manual item">
				    <h3>기본 초기화 형태</h3>
				    <div class="description"><h4>Javascript</h4>

<pre class="code"><code class="prettyprint">var elCanvas = jindo.Canvas.create();
var oCanvas = new jindo.Canvas(elCanvas);
</code></pre></div>
				</div>
            
        </div>
    

	
		<div class="tc-panel">
			<h2 id="constructor">생성자 세부 정보</h2>
	        
	            <div id="constructor_jindo.Canvas" class="constructor item">
	<h3>jindo.Canvas()
		<span>생성자</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.Canvas.js.html#l69" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>new jindo.Canvas
([el:<span class="type"><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>])</code></div>
	<div class="description"></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name optional">el</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
        <span class="default">(생략 가능)</span>
    

    

    <p class="description">canvas 엘리먼트</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        	
    
    
    
    
    

    

</div>

<!--
	
-->
	        
	    </div>
    

	
	
	
		<div class="tc-panel">
			<h2 id="method">메서드 세부 정보</h2>
	        
	            
<div id="method_clear" class="method item">
	<h3>clear()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
        
		
		<span class="btn_code"><a href="../files/source_jindo.Canvas.js.html#l154" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>clear
( )
:<a href="..\classes\jindo.Canvas.html" class="crosslink">jindo.Canvas</a></code></div>
	<div class="description"><p>canvas 엘리먼트 내부를 모두 지운다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.Canvas.html" class="crosslink">jindo.Canvas</a></span>
	<p class="description">내부를 모두 지운 canvas 인스턴스 자신</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_create" class="method item">
	<h3>create()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
            <span class="flag static" title="static"><span class="blind">static</span></span>
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.Canvas.js.html#l328" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>create
(nWidth:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>, nHeight:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>, [elParent:<span class="type"><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>])
:<a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></code></div>
	<div class="description"><p>canvas 엘리먼트를 생성한다.</p></div>

	
	<div class="remark">
		<h4>중요</h4>
	    
            <div class="example-content">IE는 exCanvas를 사용해 초기화한다.</div>
	    
	</div>
	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">nWidth</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">canvas의 너비. canvas에 지정될 width 속성 값</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">nHeight</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">canvas의 높이. canvas에 지정될 height 속성 값</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name optional">elParent</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
        <span class="default">(생략 가능)</span>
    

    

    <p class="description">append될 부모 엘리먼트</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
	<p class="description">canvas 엘리먼트</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">jindo.Canvas.create();
jindo.Canvas.create(300, 200);
jindo.Canvas.create(300, 200, document.body);
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_drawFace" class="method item">
	<h3>drawFace()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
        
		
		<span class="btn_code"><a href="../files/source_jindo.Canvas.js.html#l233" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>drawFace
(a:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array" class="crosslink external" target="_blank">Array</a></span>, htOption:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>)
:<a href="..\classes\jindo.Canvas.html" class="crosslink">jindo.Canvas</a></code></div>
	<div class="description"><p>여러개의 점으로 이루어진 면을 그린다.</p></div>

	
	<div class="remark">
		<h4>중요</h4>
	    
            <div class="example-content">x, y 좌표에 0.5를 더해 anti-aliasing되지 않도록 보정한다.</div>
	    
	</div>
	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">a</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array" class="crosslink external" target="_blank">Array</a></span>
    

    

    <p class="description">좌표셋의 배열</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">htOption</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
    

    

    <p class="description">컨텍스트에 지정할 옵션</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.Canvas.html" class="crosslink">jindo.Canvas</a></span>
	<p class="description">canvas 인스턴스 자신</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">drawFace([[0, 0], [1, 1]], { fillStyle : "rgb(255, 0, 0)" });
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_drawLine" class="method item">
	<h3>drawLine()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
        
		
		<span class="btn_code"><a href="../files/source_jindo.Canvas.js.html#l171" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>drawLine
(a:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array" class="crosslink external" target="_blank">Array</a></span>, htOption:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>, [bBlockAntiAlias:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>])
:<a href="..\classes\jindo.Canvas.html" class="crosslink">jindo.Canvas</a></code></div>
	<div class="description"><p>여러개의 점으로 이루어진 선을 그린다.</p></div>

	
	<div class="remark">
		<h4>중요</h4>
	    
            <div class="example-content">선의 두께 (lineWidth) 가 홀수일경우 x, y 좌표에 0.5를 더해 anti-aliasing되지 않도록 보정한다.</div>
	    
	</div>
	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">a</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array" class="crosslink external" target="_blank">Array</a></span>
    

    

    <p class="description">좌표셋의 배열</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">htOption</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
    

    

    <p class="description">컨텍스트에 지정할 옵션</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name optional">bBlockAntiAlias</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
        <span class="default">(기본값 : true)</span>
    

    

    <p class="description">안티앨리어싱을 막을지 여부</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.Canvas.html" class="crosslink">jindo.Canvas</a></span>
	<p class="description">canvas 인스턴스 자신</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">drawLine([[0, 0], [1, 1]], { lineWidth : 1, strokeStyle : "rgb(255, 0, 0)" });
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_drawRect" class="method item">
	<h3>drawRect()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
        
		
		<span class="btn_code"><a href="../files/source_jindo.Canvas.js.html#l269" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>drawRect
(nX:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>, nY:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>, nWidth:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>, nHeight:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>, htOption:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>, bBlockAntiAlias:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>)
:<a href="..\classes\jindo.Canvas.html" class="crosslink">jindo.Canvas</a></code></div>
	<div class="description"><p>x, y 좌표를 기준으로 사각형 막대를 그린다.</p></div>

	
	<div class="remark">
		<h4>중요</h4>
	    
            <div class="example-content">nWidth 값이 0보다 작으면 왼쪽방향으로, 0보다 크면 오른쪽방향으로 그리고, nHeight 값이 0보다 작으면 위쪽방향으로, 0보다 크면 아래쪽방향으로 그린다.</div>
	    
            <div class="example-content">htOption.strokeStyle이 지정되어있고, 컨텍스트 객체의 선의 두께(lineWidth)가 홀수일경우 x, y 좌표에 0.5를 더해 anti-aliasing되지 않도록 보정한다.</div>
	    
	</div>
	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">nX</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">x좌표</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">nY</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">y좌표</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">nWidth</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">너비</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">nHeight</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">높이</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">htOption</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
    

    

    <p class="description">컨텍스트에 지정할 옵션</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">bBlockAntiAlias</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
    

    

    <p class="description">안티앨리어싱을 막을지 여부 (디폴트 true)</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.Canvas.html" class="crosslink">jindo.Canvas</a></span>
	<p class="description">canvas 인스턴스 자신</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">drawRect(20, 100, 100, 100, {
    fillStyle : "rgb(200, 200, 200)"
}, true);

drawRect(20, 100, 100, 100, {
    strokeStyle:"rgb(10, 10, 10)", lineWidth:1
}, false);

drawRect(20, 100, 100, 100, {
    fillStyle : "rgb(200, 200, 200)", strokeStyle:"rgb(10, 10, 10)", lineWidth:1
}, true);
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_getContainer" class="method item">
	<h3>getContainer()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.Canvas.js.html#l92" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>getContainer
( )
:<a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></code></div>
	<div class="description"><p>canvas 엘리먼트의 컨테이너 엘리먼트를 가져온다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
	<p class="description">컨테이너 엘리먼트</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_getContext" class="method item">
	<h3>getContext()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.Canvas.js.html#l144" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>getContext
( )
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></code></div>
	<div class="description"><p>canvas 엘리먼트의 컨텍스트를 가져온다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
	<p class="description">canvas의 컨텍스트 객체</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_getContext" class="method item">
	<h3>getContext()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
            <span class="flag static" title="static"><span class="blind">static</span></span>
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.Canvas.js.html#l357" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>getContext
(el:<span class="type"><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>)
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></code></div>
	<div class="description"><p>canvas 엘리먼트의 컨텍스트 객체를 가져온다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name">el</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">canvas 엘리먼트</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
	<p class="description">canvas의 컨텍스트 객체</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_getElement" class="method item">
	<h3>getElement()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.Canvas.js.html#l82" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>getElement
( )
:<a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></code></div>
	<div class="description"><p>canvas 엘리먼트를 가져온다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
	<p class="description">canvas 엘리먼트</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_height" class="method item">
	<h3>height()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.Canvas.js.html#l123" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>height
( )
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></code></div>
	<div class="description"><p>canvas 엘리먼트의 높이를 구한다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
	<p class="description">canvas 엘리먼트의 높이값</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_height" class="method item">
	<h3>height()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
        
		
		<span class="btn_code"><a href="../files/source_jindo.Canvas.js.html#l129" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>height
(n:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>)
:<a href="..\classes\jindo.Canvas.html" class="crosslink">jindo.Canvas</a></code></div>
	<div class="description"><p>canvas 엘리먼트의 높이를 설정한다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name">n</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">지정할 높이값</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.Canvas.html" class="crosslink">jindo.Canvas</a></span>
	<p class="description">높이값을 설정한 canvas 인스턴스 자신</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_width" class="method item">
	<h3>width()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.Canvas.js.html#l102" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>width
( )
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></code></div>
	<div class="description"><p>canvas 엘리먼트의 너비를 구한다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
	<p class="description">canvas 엘리먼트의 너비값</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_width" class="method item">
	<h3>width()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
        
		
		<span class="btn_code"><a href="../files/source_jindo.Canvas.js.html#l108" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>width
(n:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>)
:<a href="..\classes\jindo.Canvas.html" class="crosslink">jindo.Canvas</a></code></div>
	<div class="description"><p>canvas 엘리먼트의 너비를 설정한다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name">n</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">지정할 너비값</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.Canvas.html" class="crosslink">jindo.Canvas</a></span>
	<p class="description">너비값을 설정한 canvas 인스턴스 자신</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	    </div>
    
	
	

    
        <div class="tc-panel">
			<h2 id="demo">데모</h2>
			<div class="demo">
				<ul class="demo_list" id="demo_list">
		            
		                <li><a href="../../../demo/jindo.Canvas/1. basic.html" id="demo_8be0657640d9d2d041a87a866a4157b2" title="가장&nbsp;기본적인&nbsp;사용&nbsp;예제입니다." target="_blank">기본&nbsp;예제</a></li>
		            
		                <li><a href="../../../demo/jindo.Canvas/2. sandbox.html" id="demo_9efcf7741089511f528c03b700f6fc33" title="Canvas&nbsp;컴퍼넌트를&nbsp;이용해서&nbsp;여러가지&nbsp;도형을&nbsp;그리는&nbsp;예제입니다." target="_blank">테스트</a></li>
		            
	            </ul>
				<div class="demo_example" id="demo_example">
					<div class="clipboard" style="display:block">
						<p class="description" id="demo_desc"></p>
						<iframe src="about:blank" id="demo_iframe" name="demo_iframe" width="100%" height="366" frameborder="0"></iframe>
					</div>
				</div>
				<button type="button" id="btn_external" class="btn_external">새창으로 열기</button>
			</div>
        </div>
    
	    
	
	
	<div class="btn_top" id="btn_top">
		<a title="맨위로" href="#"><span class="blind">맨위로</span></a>
	</div>	

</div>
<!-- // content -->

			</div>
		</div>
		<!-- // main content -->

	</div>
	<!-- // container -->

	<!-- footer -->
	<div id="footer">
		<p>Copyright ©<a href="http://nhncorp.com/" target="_blank">NHN Corp.</a> Platform Ajax Team. All Rights Reserved.</p>
	</div>
	<!-- // footer -->

</div>
<!-- // wrap -->

<style type="text/css">

	.item {
		transition:background .2s linear;
		-webkit-transition:background .2s linear;
		-moz-transition:background .2s linear;
		-o-transition:background .2s linear;
		-ms-transition:background .2s linear;
	}
	
	.highlight {
		background-color:#ffffd8 !important;
	}
	
	li.selected a.highlight {
		background-color:#aa8 !important;
	}
	
	.hide-deprecated .deprecated-item, .hide-inherited .inherited-item, .private {
		display:none;
	}
	
	.scrollbar-v, .scrollbar-h { display:none; }
	.scrollbar-show { display:block; }
	
	.api-page .tbl_fold .more_history { display:none; }
	
	/* FILE */
	.file pre.code {
		border:1px solid #ccc;
		padding:0;
	}
	
	.file ol {
		padding-left: 4em;
		background-color: #f9f9f9;
	}

	.file ol li {
		list-style: decimal;
		border-left:1px solid #ccc;
		padding:2px 4px;
	}
	
	.file li.L1, .file li.L3, .file li.L5, .file li.L7, .file li.L9 {
		background-color: #f9f9f9;	
	}

	.file li.L0, .file li.L2, .file li.L4, .file li.L6, .file li.L8 { 
		background-color: #f0f0f0;
	}
	
</style>
<script type="text/javascript" src="../assets/prettify/prettify-min.js"></script>
<script type="text/javascript" src="../assets/hash.js"></script>
<script type="text/javascript" src="../assets/api-list.js"></script>
<script type="text/javascript" src="../assets/api-search.js"></script>
<script type="text/javascript" src="../assets/../api.js?callback=APISearch.setData"></script>
<script type="text/javascript">
	var projectRoot = "../";
	var projectAssets = "../assets";
	
    apiDocs(projectAssets);	
</script>
</body>
</html>